<template>
  <avue-crud
    :option="option"
    :table-loading="loading"
    :data="data"
    :page="page"
    @current-change="currentChange"
    @size-change="sizeChange"
    @on-load="onLoad"
  >
    <template slot="menuLeft">
      <el-input
        class="m-r-10"
        size="small"
        placeholder="请输入加注卡号"
        v-model="query.queryWord"
        style="width: 300px"
        @change="onLoad(page, query)"
      ></el-input>
    </template>
  </avue-crud>
</template>

<script>
import { getUsercard } from "@/api/business/filling-record-user";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      query: {
        queryWord: "",
      },
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        columnBtn: false,
        refreshBtn: false,
        height: "auto",
        calcHeight: 310,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        index: true,
        addBtn: false,
        selection: false,
        menu: false,
        align: "center",
        column: [
          {
            label: "加注卡号",
            prop: "cardNo",
            span: 24,
          },
          {
            label: "卡密码",
            prop: "cardPwd",
            span: 24,
          },
          {
            label: "卡类型",
            prop: "cardType",
            type: "radio",
            dicData: [
              { label: "共享余额", value: 0 },
              { label: "分配余额", value: 1 },
            ],
            span: 24,
          },
          {
            label: "卡余额（元）",
            prop: "cardMoney",
            span: 24,
          },
          {
            label: "卡备注",
            prop: "cardDesc",
            overHidden: true,
            span: 24,
          },
          {
            label: "卡状态",
            prop: "cardStatus",
            type: "radio",
            dicData: [
              { label: "删除", value: 0 },
              { label: "停用", value: 2 },
              { label: "正常", value: 1 },
              { label: "锁定", value: 3 },
            ],
            span: 24,
          },
        ],
      },
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  props: {
    customerId: {
      type: String,
      default: "",
    },
  },
  methods: {
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    onLoad(page, params = {}) {
      this.loading = true;
      let all = {
        pageSize: page.pageSize,
        currentPage: page.currentPage,
        ...this.query,
        userId: this.customerId,
      };
      getUsercard(all).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    },
  },
};
</script>

<style></style>
